<template>
	<div class="topbox cf">
		<div class="top_li cf">
			<div class="liImg" v-for="(r,i) in rankId" :class="{active:i==on}"  @click="getlist(i)">
				<img :src="r"/>
			</div>
		</div>
		<div class="top_sing" v-for="(t,index) in tracks" @click="play(t.id)">
			<span class="no"><span v-if="index<9">0</span>{{index+1}}</span>
			<span class="sing_name">
				{{t.name}}
			</span>
			<p class="singer">
				<span  v-for="(a,i) in t.ar">{{a.name}}<span v-if="!(i == t.ar.length-1) ">/</span> </span>
				<span></span>
			</p>
		</div>
	</div>
</template>

<script>
	
	import axios from 'axios';
	
	export default{
		data(){
			return{
				rankId:{
					"0": "http://p1.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048",
					"1": "http://p1.music.126.net/GhhuF6Ep5Tq9IEvLsyCN7w==/18708190348409091",
					"2": "http://p1.music.126.net/sBzD11nforcuh1jdLSgX7g==/18740076185638788",
					"3": "http://p1.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497",
					"4": "http://p1.music.126.net/qN-sDLqehN1oHGyov-0EZw==/109951163068669685",
					"5": "http://p1.music.126.net/VQOMRRix9_omZbg4t-pVpw==/18930291695438269.",
					"6": "http://p1.music.126.net/EBRqPmY8k8qyVHyF8AyjdQ==/18641120139148117",
					"7": "http://p1.music.126.net/H4Y7jxd_zwygcAmPMfwJnQ==/19174383276805159",
					"8": "http://p1.music.126.net/83pU_bx5Cz0NlcTq-P3R3g==/18588343581028558",
					"9":"http://p1.music.126.net/54vZEZ-fCudWZm6GH7I55w==/19187577416338508",
					"10": "http://p1.music.126.net/Rgqbqsf4b3gNOzZKxOMxuw==/19029247741938160",
					"11": "http://p1.music.126.net/9YSGHPRdVazKSiNGl3uwpg==/5920870115713082.j",
					"12": "http://p1.music.126.net/tSl2BF3dZi4cLMD70_fYLw==/5739450697092147.jpg",
					"13": "http://p1.music.126.net/v_cgiZ305WeM4GJiGIOu7Q==/7815328650414104.jpg",
					"14": "http://p1.music.126.net/JPh-zekmt0sW2Z3TZMsGzA==/18967675090783713",
					"15": "http://p1.music.126.net/2klOtThpDQ0CMhOy5AOzSg==/18878614648932971",
					"16": "http://p1.music.126.net/YQsr07nkdkOyZrlAkf0SHA==/18976471183805915",
					"17": "http://p1.music.126.net/N2whh2Prf0l8QHmCpShrcQ==/19140298416347251",
					"18": "http://p1.music.126.net/_nwkQTFtOdAjFvOI8Wg7Tg==/18922595114302109",
					"19": "http://p1.music.126.net/6O0ZEnO-I_RADBylVypprg==/109951162873641556",
					"20": "http://p1.music.126.net/wqi4TF4ILiTUUL5T7zhwsQ==/18646617697286899",
					"21": "http://p1.music.126.net/A61n94BjWAb-ql4xpwpYcg==/18613632348448741",
					"22": "http://p1.music.126.net/vttjtRjL75Q4DEnjRsO8-A==/18752170813539664.jpg",
					"23": "http://p1.music.126.net/RChr5NydlXafIV1GVEHJdg==/19073228207465342"
				},
				tracks:[],
				playlist:"",
				on:-1,
			}
			
		},
		beforeMount(){
			this.getlist();
		},
		methods:{
			getlist(rankId=0){
				this.on = rankId;
				axios.get('https://netease.bluej.cn/top/list?timestamp=13',{
					params:{
						idx:rankId,
					}
				}).then( (res) =>{
					console.log(res.data);
					this.tracks=res.data.playlist.tracks;
					this.playlist = res.data.playlist;
					console.log(this.tracks);
				})
			},
			play(songid){
				this.$store.commit("change",{
					playState:true,
					id:songid,
				});
				console.log("aaa",this);
				this.$parent.$parent.$refs.player.getSong();
				this.$router.push({path:"/play",query:{id:songid}});
				this.$parent.$parent.flag=false;
			}
				
		}
	}
	
	
</script>

<style lang="scss">
	.topbox{
		padding-top: 88px;
		padding-bottom: 60px;
	}
	.top_li{
			display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
                height:88px;
		.liImg{
			width:80px;
			height:80px;
			padding:3px;
			img{
				width: 100%;
			}
		}
		.active{
			background:#D43C33;
		}
	}
	.top_sing{
		color: #E6E6E6;
		text-align: left;
		overflow:hidden;
		/*position: relative;*/
		height: 60px;
		.no{
			display: inline-block;
			text-align: center;
			width: 45px;
			/*height: 40px;*/
		}
		.sing_name{
			display: inline-block;
			width: 70%;
			font-size: 17px;
			color: white;
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
		}
		.singer{
			overflow:hidden;
		    text-overflow:ellipsis;
		    white-space:nowrap;
			 margin-left: 50px;
			 color: #bababb;
			 span{
			 	font-size: 12px;
			 	span{
			 		margin: 0 5px;
			 	}
			 }
		}
	}
</style>